<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>动态排序（base）</title>
	<script src="../static/js/echarts.js"></script>
	<!-- <script src="../static/js/echarts.min.js"></script> -->
</head>
<body>
	<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

/* 
动态排序柱状图通常是横向的柱条，如果想要采用纵向的柱条，只要把本教程中的 X 轴和 Y 轴相反设置即可。

柱状图系列的 realtimeSort 设为 true，表示开启该系列的动态排序效果
yAxis.inverse 设为 true，表示 Y 轴从下往上是从小到大的排列
yAxis.animationDuration 建议设为 300，表示第一次柱条排序动画的时长
yAxis.animationDurationUpdate 建议设为 300，表示第一次后柱条排序动画的时长
如果想只显示前 n 名，将 yAxis.max 设为 n - 1，否则显示所有柱条
xAxis.max 建议设为 'dataMax' 表示用数据的最大值作为 X 轴最大值，视觉效果更好
如果想要实时改变标签，需要将 series.label.valueAnimation 设为 true
animationDuration 设为 0，表示第一份数据不需要从 0 开始动画（如果希望从 0 开始则设为和 animationDurationUpdate 相同的值）
animationDurationUpdate 建议设为 3000 表示每次更新动画时长，这一数值应与调用 setOption 改变数据的频率相同
以 animationDurationUpdate 的频率调用 setInterval，更新数据值，显示下一个时间点对应的柱条排序
*/

var data = [];
for (let i = 0; i < 5; ++i) {
	data.push(Math.round(Math.random() * 200));
}
console.log(data);

// 指定图表的配置项和数据
var option = {
	xAxis: {
		max: 'dataMax'
	},
	yAxis: {
		type: 'category',
		data: ['A', 'B', 'C', 'D', 'E'],
		inverse: true,
		axisLabel: {
			show: true,
			fontSize: 14,
			formatter: function (value) {
				return value + '字';
			}
		},
		animationDuration: 300,
		animationDurationUpdate: 300,
		max: 2 // 将只显示最大的3个条形图
	},
	series: [
		{
			realtimeSort: true,
			name: 'X',
			type: 'bar',
			data: data,
			label: {
				show: true,
				position: 'right',
				// valueAnimation: true		//把这个注释了，数字就不是平滑增长，而是阶梯增长
			}
		}
	],
	legend: {
		show: true
	},
	animationDuration: 3000,
	animationDurationUpdate: 3000,
	animationEasing: 'linear',
	animationEasingUpdate: 'linear'
};

function update() {
	var data = option.series[0].data;
	for (var i = 0; i < data.length; ++i) {
		if (Math.random() > 0.9) {
			data[i] += Math.round(Math.random() * 2000);
		} else {
			data[i] += Math.round(Math.random() * 200);
		}
	}
	myChart.setOption(option);
	// console.log(option.series[0].data);
}

var n = 0;
var up_set = setInterval(function() {
	n++;
	if(n >= 5){
		// console.log('clearInterval');
		clearInterval(up_set);
	}
	// console.log(n);
	update();
}, 3000);

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>
